import { createVNode, render } from "vue";
import paramsSplicing from './nodeComponents/paramsSplicing.vue'

export default function register(lf) {
  lf.register('dataMerge', ({ HtmlNode, HtmlNodeModel, h }) => {
    class Node extends HtmlNode {
      setHtml(rootEl) {
        const { properties } = this.props.model;
        const el = document.createElement('div');
        rootEl.innerHTML = '';
        rootEl.appendChild(el);
        const myApp = createVNode(paramsSplicing, {
          props: {
            name: properties.text,
          },
        });
        render(myApp,el)
      }
    }
    class Model extends HtmlNodeModel {
      constructor(data, graphModel) {
        data.text = {
          value: (data.text && data.text.value) || '合并节点',
          x: data.x,
          y: data.y + 50
        }
        super(data, graphModel)
      }
      initNodeData(data) {
        if (data.text) {
          data.text.editable = false
        }
        super.initNodeData(data)
        const width = 62
        const height = 62
        this.width = width
        this.height = height
        this.anchorsOffset = [
          [width / 2, 0],
          [0, height / 2],
          [-width / 2, 0],
          [0, -height / 2],
        ]
      }
    }
    return {
      view: Node,
      model: Model
    }
  })
}
